
//jquery页面加载时执行的方法
$(function () {
    chaxunCompany();
})


//对于onload事件，不能跳出我们的框架，嵌套
//ajax语法，$.ajax({})  可以看出，小括号里面是一个对象{}，
//对于js来说，对象的格式{"":"","":""}key:value,
// 如果是json格式：一般情况下我们的key会用引号括起来，其他情况下可以不需要引号
//js对引号不敏感，js对于字符和字节都表示字符，js没有字节的说法，
//调用后台的地址，可以用完整的地址，也可以直接调用断后后面的地址
//区别在于：如果是完整的地址，随时随地都可以用
//如果是只有断后后面的地址：只能是本地，http://localhost:8080只能是前后端未分离，在一起的时候，
// 默认就是当前项目的地址
function chaxunCompany() {
    //要得到电话的值，可以有两种方式：
    // 1.js ,定义一个变量 得到电话的值
    var jsPhone = document.getElementById("phone").value;//拿到phone的对象
    // console.log(jsPhone);
    // alert(jsPhone);
    // 2.jquery
    var jqPhone = $("#phone").val();//jQuery得到phone的值
    //jquery是别人（第三方）写的一个技术框架，
    // ajax页面局部刷新
    $.ajax({
        url: '/companySelect',//调用后台的地址，可以用完整的地址，
        data: {phone: jqPhone},//传递给后台的数据，为json格式，对象{}，
        type: 'get',//调用后台的方法类型：get，post ，get和post的区别，get查询效率快，post用于增加，删除，修改
        dataType: 'json',//返回页面值的对象格式
        success: function (data) {//调用成功后返回给页面的值data
            //得到数据后，我们需要将数据进行整理，然后赋值给我们需要的地方
            setCompanyTableData(data);
        },
        error: function (data) {//执行后台错误的时候调用的方法

        }
    })
}

//将得到的数据进行赋值
//面向对象编程，就是一个方法里面只做一件事情，这个也符合我们以后用的设计模式的六大原则，单一职责
function setCompanyTableData(data) {//方法名命名规则，见名知意
    var html = '';//设定一个html变量，赋值为空

    //遇到数组，必须有循环，将所有的数据读取出来
    //循环的选择：
    // while，不知道要循环多少次 while(true){}
    // do while，这里至少执行一次，然后循环 不知道要循环多少次
    // 举例：如果想要死循环，用while就好
    // for， 知道要循环多少次 (var i=0;i<data.length;i++) var id=data[i].id
    // foreach  增强for循环( var aa:data ) aa即是data里面的每一个对象  var id=aa.id

    console.log(data.length);
    for (var i = 0; i < data.length; i++) {
        //拼接字符串
        html += ' <tr>\n' +
            '            <td>' + data[i].id + '</td>\n' +
            '            <td>' + data[i].name + '</td>\n' +
            '            <td>' + data[i].logo + '</td>\n' +
            '            <td>' + data[i].phone + '</td>\n' +
            '            <td>' + data[i].net + '</td>\n' +
            '            <td>' + data[i].email + '</td>\n' +
            '            <td>' + data[i].linePhone + '</td>\n' +
            '            <td class="td-content">' + data[i].content + '</td>\n' +
            '            <td>' + data[i].address + '</td>\n' +
            '            <td>' + data[i].version + '</td>\n' +
            '            <td>编辑 删除</td>\n' +
            '        </tr>';
    }

    $("#companyTbody").html(html);//赋值：将table里面的信息赋值到这个id里面
    //jQuery的赋值，取值，
    // 赋值即$("id").html(rains);
    // 取值：var value=$("id").html()；
}

//通过页面搜索条件进行查询
function chaxunCompanyBySome() {

    //通过Ajax来进行查询，首先我们需要写出Ajax的格式
    //jQuery取值赋值的时候，如果是要得到文本的值text，则用val(),如果是要得到html的值，用html();
    //代码自动对齐：ctrl+shift+f
    //传值给后台代码的时候，需要对取得的值进行空格处理
    //.trim()。删除值两边的空格
    // var phonejs = document.getElementById("phone").value.trim();


    //当用户通过复制或者直接打空格的方式输入空格，我们直接显示值，把空格去掉

    var data = {
        phone: $("#phone").val(),
        name: $("#name").val(),
        net: $("#net").val(),
        content: $("#content").val(),
        address: $("#address").val()
    };
    $.ajax({
        url: '/companySelectBySome',
        data: data,
        type: 'get',
        dataType: 'json',
        success: function (data) {
            //查询后，我们需要进行赋值

            setCompanyTableData(data);//将赋值的代码单独提取出来，主要是为了复用，解耦

        }
    })

}

function shiqu(e) {
    //trim只能去掉左右两边的空格，不能去掉中间的空格，
    // 如果想要去掉中间的空格，需要用到正则表达式
    $(e).val($.trim($(e).val()));
    // $("#name").val($.trim($("#name").val()));
    // $("#net").val($.trim($("#net").val()));
    // $("#content").val($.trim($("#content").val()));
    // $("#address").val($.trim($("#address").val()));
}
function login() {
    document.getElementById("usernameSpan").innerHTML="法师的发";
    // let username = $.trim($("#username").val());
    // let password = $.trim($("#password").val());
    // let code = $.trim($("#code").val());
    // if (judge(username, password) && code !== "") {
    //     toLoginServlet(username, password, code);
    // }
}
